<html>
    <head>
        <script src="https://d3js.org/d3.v5.js"></script>
    </head>
    <body>
        <h1>BarPlot</h1>

        <svg height="400" width="400" style="border:1px solid #cd0000;" id="bar">
   
        </svg>
    </body>
    <script>
        // 测试数据
        var data = [{
            year: 2011,
            value: 45
        }, {
            year: 2012,
            value: 47
        }, {
            year: 2013,
            value: 52
        }, {
            year: 2014,
            value: 70
        }, {
            year: 2015,
            value: 75
        }, {
            year: 2016,
            value: 78
        }]

        // 获取作图view-port以及view-port的大小，并且设定作图周边的大小
        var svg = d3.select("svg")
        margin = 200
        width = svg.attr("width") - margin
        height = svg.attr("height") - margin

        // 设定好坐标轴，x轴采用band，适用于discrete坐标，range是指整体的x轴的在图上的大小，然后padding则是不同bar的相对宽度
        var xScale = d3.scaleBand().range ([0, width]).padding(0.4)
        // 设定y轴，为线性轴，并且设定好y轴在图上的大小
        var yScale = d3.scaleLinear().range ([height, 0])

        // 在100，100的坐标上新建分组
        var g = svg.append("g")
                .attr("transform", "translate(" + 100 + "," + 100 + ")");

        // 设定具体的坐标轴坐标
        xScale.domain(data.map(function(d) { return d.year; }));
        yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

        // 真正把x轴添加到图上
        g.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xScale));

        // 把y轴添加到图上，并且调整展示的风格
        g.append("g")
            .call(d3.axisLeft(yScale).tickFormat(function(d){
                return "$" + d;
            }).ticks(10))
            .append("text")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .attr("text-anchor", "end")
            .text("value");
        
        // 把bar图添加上去，添加了class为bar的rect，
        g.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            // .attr("class", "bar")
            .attr("x", function(d) { return xScale(d.year); }) // 转换x和y的坐标
            .attr("y", function(d) { return yScale(d.value); })
            .attr("width", xScale.bandwidth())
            .attr("height", function(d) { return height - yScale(d.value); })
            .attr("style", "fill:steelblue")

        g.selectAll(".bar")
            .data(data)
            .enter()
            .append("text")
            .attr("x", function(d) { return xScale(d.year) + xScale.bandwidth() / 2; })
            .attr('text-anchor', 'middle')
            .attr("y",  function(d) { 
                var barHeight = height - yScale(d.value)
                return yScale(d.value) + barHeight / 2;
            })
            .text(function(d) { return d.value })
            .attr("style", "fill:white")
            // .attr("transform", function(d) {
            //     var barHeight = height - yScale(d.value)
            //     return `rotate(90, ${xScale(d.year) + xScale.bandwidth() / 2 }, ${yScale(d.value) + barHeight / 2})`
            // })
    
    </script>
</html>